<template>
  <div>
    <div style="margin-bottom: 10px">
      <img src="@/assets/imgs/hasColorLogo.png" alt="" class="logo" />
      <div class="title">售后服务单</div>
    </div>
    <div class="tab">
      <div class="d-flex align-center border-bottom">
        <div class="bg-dark item-title height-64 border-right">客户资料</div>
        <div class="width-90">
          <div class="d-flex  border-bottom">
            <div class="d-flex width-33">
              <div class="bg-light width-40 height-32 border-right">客户名称</div>
              <div class="width-60">
                <el-input disabled class="" v-model="formData.customerName" />
              </div>
            </div>
            <div class="d-flex width-33">
              <div class="bg-light width-40 height-32 border-right border-left">客户联系人</div>
              <div class="width-60">
                <el-input :disabled="formType === 'view'" class="" v-model="formData.customerContacts" />
              </div>
            </div>
            <div class="d-flex width-33">
              <div class="bg-light width-40 height-32 border-right border-left">客户电话</div>
              <div class="width-60">
                <el-input :disabled="formType === 'view'" class="" v-model="formData.customerMobile" />
              </div>
            </div>
          </div>
          <div class="d-flex">
            <div class="d-flex width-33">
              <div class="bg-light width-40 height-32 border-right">产品编号</div>
              <div class="width-60">
                <el-input disabled class="" v-model="formData.productNumber" />
              </div>
            </div>
            <div class="d-flex width-33">
              <div class="bg-light width-40 height-32 border-right border-left">产品安装日期</div>
              <div class="width-60">
                <el-date-picker
                  :disabled="formType === 'view'"
                  v-model="formData.productInstallDate"
                  type="date"
                  value-format="YYYY-MM-DD"
                  placeholder="选择产品安装日期"
                  style="width: 100%;"
                />
              </div>
            </div>
            <div class="d-flex width-33">
              <div class="bg-light width-40 height-32 border-right border-left">客户公司地址</div>
              <div class="width-60">
                <el-input disabled class="" v-model="formData.customerAddress" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="d-flex align-center border-bottom">
        <div class="bg-dark item-title height-64 border-right">售后类型</div>
        <el-radio-group 
          class="justify-center" 
          style="width: 90%" 
          v-model="formData.dictPostType"
          :disabled="formType === 'view'"
        >
          <el-radio
            v-for="dict, index in getIntDictOptions('post_service_type')"
            :key="index"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
      </div>
      <div class="d-flex align-center border-bottom bg-dark">
        <div class="item-title">售后人员</div>
        <div class="width-90 border-left">
          <div v-for="item, index in formData.childList" :key="index" class="service-wrap">
            <div class="d-flex align-center">
              <div :class="{'width-90': !(index === 0 && formData.childList.length === 1) && formType === 'update', 'width-100': (index === 0 && formData.childList.length === 1) || formType === 'view'}">
                <div class="d-flex service">
                  <div class="d-flex width-33">
                    <div class="bg-light width-40 height-32 border-right">到达现场时间</div>
                    <div class="width-60">
                      <el-date-picker
                        :disabled="formType === 'view'"
                        v-model="item.arriveSceneTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="选择到达现场时间"
                        style="width: 100%;"
                      />
                    </div>
                  </div>
                  <div class="d-flex width-33">
                    <div class="bg-light width-40 height-32 border-right border-left">离开现场时间</div>
                    <div class="width-60">
                      <el-date-picker
                        :disabled="formType === 'view'"
                        v-model="item.leaveSceneTime"
                        type="date"
                        value-format="YYYY-MM-DD"
                        placeholder="选择离开现场时间"
                        style="width: 100%;"
                      />
                    </div>
                  </div>
                  <div class="d-flex width-33">
                    <div class="bg-light width-40 height-32 border-right border-left">工日总数</div>
                    <div class="width-60">
                      <el-input :disabled="formType === 'view'" class="" v-model="item.workDayTotal" />
                    </div>
                  </div>
                </div>
                <div class="d-flex service">
                  <div class="d-flex width-33">
                    <div class="bg-light width-40 height-32 border-right">服务人员</div>
                    <div class="width-60">
                      <el-select
                        v-model="item.jobNumber"
                        :key="index"
                        filterable
                        remote
                        :remote-method="getSelectServiceList"
                        :loading="serviceLoading"
                        style="width: 100%"
                        @change="changeService(item.jobNumber, index)"
                        :disabled="formType === 'view'"
                      >
                        <el-option
                          v-for="dict in serviceList"
                          :key="dict.jobNumber"
                          :label="dict.staffName"
                          :value="dict.jobNumber"
                        />
                      </el-select>
                    </div>
                  </div>
                  <div class="d-flex width-33">
                    <div class="bg-light width-40 height-32 border-right border-left">联系电话</div>
                    <div class="width-60">
                      <el-input :disabled="formType === 'view'" class="" v-model="item.customerMobile" />
                    </div>
                  </div>
                  <div class="d-flex width-33">
                    <div class="bg-light width-40 height-32 border-right border-left">服务工时</div>
                    <div class="width-60">
                      <el-input :disabled="formType === 'view'" class="" v-model="item.serviceWorkTime" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="bg-white width-10 border-left border-bottom height-66" v-if="!(index === 0 && formData.childList.length === 1) && formType === 'update'">
                <el-button @click="deleteRow('sale', index)" type="danger">移除</el-button>
              </div>
            </div>
          </div>
          <div class="pt-10px pb-10px bg-white" v-if="formType === 'update'">
            <el-button @click="addService">新增</el-button>
          </div>
        </div>
      </div>
      <div v-for="item, index in formData.dutys" :key="index" class="d-flex align-center border-bottom">
        <div class="border-right" :class="{'width-90': !(index === 0 && formData.dutys.length === 1) && formType === 'update', 'width-100': (index === 0 && formData.dutys.length === 1) || formType === 'view'}">
          <div class="d-flex align-center border-bottom bg-dark width-100">
            <div class="item-title ">保修故障描述{{ index + 1 }}</div>
            <el-input 
              style="width: 90%"
              type="textarea" 
              maxlength="200" 
              rows="4" 
              resize="none"
              show-word-limit
              v-model="item.failureDescription" 
              :disabled="formType === 'view'"
            />
          </div>
          <div class="d-flex align-center border-bottom bg-dark">
            <div class="item-title">故障处理情况{{ index + 1 }}</div>
            <el-input 
              type="textarea" 
              maxlength="200" 
              rows="4" 
              resize="none"
              show-word-limit
              v-model="item.failureHandling" 
              :disabled="formType === 'view'"
            />
          </div>
          <div class="d-flex align-center bg-dark">
            <div class="item-title">故障原因分析{{ index + 1 }}</div>
            <el-input 
              type="textarea" 
              maxlength="200" 
              rows="4" 
              resize="none"
              show-word-limit
              v-model="item.failureCause" 
              :disabled="formType === 'view'"
            />
          </div>
        </div>
        <div class="width-10" v-if="!(index === 0 && formData.dutys.length === 1) && formType === 'update'">
          <el-button @click="deleteRow('duty', index)" type="danger">移除</el-button>
        </div>
      </div>
      <div class="border-bottom add-btn" v-if="formType === 'update'">
        <el-button @click="addDuty">新增</el-button>
      </div>
      <div class="d-flex align-center border-bottom">
        <div class="bg-dark item-title height-64 border-right">售后服务评价</div>
        <el-radio-group 
          class="justify-center" 
          style="width: 30%;" 
          v-model="formData.dictServiceEvaluate"
          :disabled="formType === 'view'"
        >
          <el-radio
            v-for="dict, index in getIntDictOptions('post_service_evaluate')"
            :key="index"
            :label="dict.value"
          >
            {{ dict.label }}
          </el-radio>
        </el-radio-group>
        <div class="bg-dark item-title height-64 border-right border-left">客户签名</div>
        <el-input style="width: 20%" :disabled="formType === 'view'"  v-model="formData.customerSignature" />
        <div class="bg-dark item-title height-64 border-right border-left">日期</div>
        <el-input style="width: 20%" :disabled="formType === 'view'"  v-model="formData.signatureDate" />
      </div>
      <div class="border-bottom bg-dark height-32">本次维修发生费用</div>
      <div class="d-flex border-bottom">
        <div class="bg-light item-title height-32 border-right">材料费</div>
        <div class="width-23">
          <el-input 
            type="number" 
            v-model="formData.materialsExpenses" 
            :disabled="formType === 'view'" 
            @change="setTotal"
          />
        </div>
        <div class="bg-light item-title height-32 border-right border-left">人工费</div>
        <div class="width-23">
          <el-input 
            type="number" 
            v-model="formData.costOfLabor" 
            :disabled="formType === 'view'" 
            @change="setTotal"
          />
        </div>
        <div class="bg-light item-title height-32 border-right border-left">车运费</div>
        <div class="width-23">
          <el-input 
            type="number" 
            v-model="formData.truckingExpense" 
            :disabled="formType === 'view'"
            @change="setTotal"
          />
        </div>
      </div>
      <div class="d-flex border-bottom">
        <div class="bg-light item-title height-32 border-right">中餐伙食费</div>
        <div class="width-23" >
          <el-input
            type="number"
            v-model="formData.noonBoardWages" 
            placeholder="费用"
            :disabled="formType === 'view'"
            @change="setTotal"
          />
        </div>
        <div class="bg-light item-title height-32 border-right border-left">晚餐伙食费</div>
        <el-input
          type="number" 
          class="width-23" 
          v-model="formData.nightBoardWages" 
          :disabled="formType === 'view'"
          @change="setTotal"
        />
        <div class="bg-light item-title height-32 border-right border-left">加工费</div>
        <el-input 
          class="width-23" 
          type="number"
          v-model="formData.processCost" 
          :disabled="formType === 'view'"
          @change="setTotal"
        />
      </div>
      <div class="d-flex border-bottom">
        <div class="bg-light item-title height-32 border-right">住宿费</div>
        <el-input :disabled="formType === 'view'" class="width-23" v-model="formData.quarterage" />
        <div class="bg-light item-title height-32 border-right border-left">住宿补贴</div>
        <el-input
          type="number" 
          class="width-23" 
          v-model="formData.quarterageSubsidy"
          :disabled="formType === 'view'"
          @change="setTotal"
        />
        <div class="bg-light item-title height-32 border-right border-left">其他费用</div>
        <el-input type="number" :disabled="formType === 'view'" class="width-23" v-model="formData.otherExpenses" @change="setTotal" />
      </div>
      <div class="d-flex border-bottom">
        <div class="bg-light item-title height-32 border-right">费用合计</div>
        <div class="width-90 height-32">{{ formData.totalPrice }}</div>
      </div>
      <div class="d-flex border-bottom">
        <div class="bg-light item-title height-32 border-right">备注</div>
        <el-input :disabled="formType === 'view'" class="width-90" v-model="formData.remarks" />
      </div>
      <div class="d-flex border-bottom align-center bg-light">
        <div class="item-title">责任判定</div>
        <div class="faults-wrap border-left">
          <div class="d-flex flex-wrap faults">
            <div v-for="item, index in formData.faults" :key="index" class="d-flex faults-item" :class="{'border-bottom': isHaveBorderBottom(index), 'border-right': isChild2N(index)}">
              <div class="border-right width-20">责任项目</div>
              <el-select
                v-model="item.dictDuty"
                placeholder="请选择责任"
                clearable
                :class="{'width-20': !(index === 0 && formData.faults.length === 1) && formType === 'update', 'width-30': (index === 0 && formData.faults.length === 1) || formType === 'view'}"
                :disabled="formType === 'view'"
              >
                <el-option
                  v-for="dict, index in getIntDictOptions('dict_duty')"
                  :key="index"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
              <div class="border-right border-left width-20">责任占比</div>
              <el-input
                type="number" 
                :class="{'width-20': !(index === 0 && formData.faults.length === 1) && formType === 'update', 'width-30': (index === 0 && formData.faults.length === 1) || formType === 'view'}"
                v-model="item.dutyProportion"
                :disabled="formType === 'view'"
                placeholder="请输入占比"
              />
              <div class="width-20 border-left word-center" v-if="!(index === 0 && formData.faults.length === 1) && formType === 'update'">
                <el-button @click="deleteRow('fault', index)" type="danger">移除</el-button>
              </div>
            </div>
          </div>
          <div class="border-top pt-10px pb-10px bg-white" v-if="formType === 'update'">
            <el-button @click="addFaults">新增</el-button>
          </div>
        </div>
      </div>
      <div class="d-flex border-bottom">
        <div class="bg-dark item-title height-32 border-right" style="height: 33px">回访时间</div>
        <div class="width-40 d-flex align-center">
          <el-date-picker
            :disabled="formType === 'view'"
            v-model="formData.returnTime"
            type="date"
            value-format="YYYY-MM-DD"
            placeholder="选择回访时间"
            style="width: 100%;"
          />
        </div>
        <div class="bg-dark item-title height-32 border-right border-left">回访人</div>
        <div class="width-40">
          <el-input :disabled="formType === 'view'" v-model="formData.returnContacts" />
        </div>
      </div>
      <div class="d-flex align-center border-bottom bg-dark">
        <div class="item-title height-64">回访结果</div>
        <el-input 
          type="textarea" 
          maxlength="200" 
          rows="4" 
          resize="none"
          show-word-limit
          v-model="formData.returnResult" 
          :disabled="formType === 'view'" 
        />
      </div>
      <div class="d-flex align-center bg-dark">
        <div class="item-title height-32">附件上传</div>
        <div style="text-align: left;" class="border-left width-90 bg-white">
          <div v-if="formType === 'update'">
            <UploadFile 
              style="width: 200px" 
              v-if="formData.fileList"
              v-model="formData.fileList"
              :isShowTip="false"
              :limit="1" 
              :fileSize="200" 
              :fileType="['pdf', 'png', 'jpg']" 
              @update:modelValue="uploadFile" 
            />
          </div>
          <div class="height-32" v-else>
            <el-button link type="primary" @click="openFile(formData.filePath)">{{ formData.fileName }}</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { getIntDictOptions } from '@/utils/dict'
import * as componentApi from '@/api/componentApi'

const formData = ref({
  id: undefined,
  taskNumber: undefined,
  internalRelationId: undefined,
  creatorName: undefined,
  customerName: undefined,
  customerContacts: undefined,
  customerMobile: undefined,
  productNumber: undefined,
  productInstallDate: undefined,
  customerAddress: undefined,
  dictPostType: undefined,
  failureDescription: undefined,
  failureHandling: undefined,
  failureCause: undefined,
  dictStatus: undefined,
  dictServiceEvaluate: undefined,
  materialsExpenses: undefined,
  costOfLabor: undefined,
  truckingExpense: undefined,
  boardWages: undefined,
  processCost: undefined,
  quarterage: undefined,
  quarterageSubsidy: undefined,
  otherExpenses: undefined,
  totalPrice: undefined,
  returnTime: undefined,
  returnContacts: undefined,
  returnResult: undefined,
  fileName: undefined,
  filePath: undefined,
  dictTaskType: undefined,
  orderNumber: undefined,
  dictOrderType: undefined,
  productName: undefined,
  customerCode: undefined,
  remarks: undefined,
  nightBoardWages: undefined, //晚餐
  noonBoardWages: undefined,  //中餐
  submitFlag: undefined,  //提交标记
  fileList: undefined,
  //售后人员
  childList: [
    {
      arriveSceneTime: undefined, //到达时间
      leaveSceneTime: undefined,  //离开时间
      workDayTotal: undefined,  //工作日总数
      staffName: undefined, //服务人员
      jobNumber: undefined, //工号
      serviceWorkTime: undefined, //服务工时
      customerMobile: undefined //联系电话
    }
  ],
  // 故障
  dutys: [
    {
      failureDescription: undefined,  //售后故障描述
      failureHandling: undefined, //故障处理情况
      failureCause: undefined,  //故障原因分析
    }
  ],
  // 责任判定
  faults: [
    {
      dictDuty: undefined,  //责任
      dutyProportion: undefined,  //占比
    }
  ],
  customerSignature: undefined,
  signatureDate: undefined
})

const props = defineProps({
  formType: {
    type: String,
    default: ''
  },
  detailData: {
    type: Object,
    default: () => {}
  },
  showAdd: {
    type: Boolean,
    default: true
  }
})

interface ServiceType {
  jobNumber: string,
  staffName: string
}
const serviceLoading = ref(false) //服务人员加载
const serviceList = ref<ServiceType[]>([]) //服务人员列表

// 获取服务人员
const getSelectServiceList = async (query: string) => {
  serviceLoading.value = true
  try {
    let data = await componentApi.getStaffList(query)
    serviceList.value = data
  } finally {
    serviceLoading.value = false
  }
}

// 服务人员改变
const changeService = async (jobNumber, index) => {
  const data = await componentApi.getStaffList(jobNumber)
  formData.value.childList[index].staffName = data[0].staffName
}

// 增加售后服务人员
const addService = () => {
  formData.value.childList.push({
    arriveSceneTime: undefined, //到达时间
    leaveSceneTime: undefined,  //离开时间
    workDayTotal: undefined,  //工作日总数
    staffName: undefined, //服务人员
    jobNumber: undefined, //工号
    serviceWorkTime: undefined, //服务工时
    customerMobile: undefined //联系电话
  })
}

// 增加故障
const addDuty = () => {
  formData.value.dutys.push({
    failureDescription: undefined,  //售后故障描述
    failureHandling: undefined, //故障处理情况
    failureCause: undefined,  //故障原因分析
  })
}

// 增加责任判定
const addFaults = () => {
  formData.value.faults.push({
    dictDuty: undefined,
    dutyProportion: undefined
  })
}

// 移除
const deleteRow = (type: string, index: number) => {
  if (type === 'sale') {
    // 移除售后服务人员
    formData.value.childList.splice(index, 1)
  } else if (type === 'duty') {
    // 移除故障
    formData.value.dutys.splice(index, 1)
  } else if (type === 'fault') {
    // 移除责任判定
    formData.value.faults.splice(index, 1)
  }
}

// 是否显示下边框
const isHaveBorderBottom = (index: number) => {
  return (
    (
      index !== formData.value.faults.length - 1 && 
      formData.value.faults.length % 2 !== 0
    ) ||
    (
      ![formData.value.faults.length - 1, formData.value.faults.length - 2].includes(index) && 
      formData.value.faults.length % 2 === 0
    )
  )
}

// 是否显示又边框
const isChild2N = (index: number) => {
  return !(index % 2 === 1)
}

// 计算费用合计
const setTotal = () => {
  formData.value.totalPrice = 
    parseFloat(formData.value.materialsExpenses || 0) 
    + parseFloat(formData.value.costOfLabor || 0) 
    + parseFloat(formData.value.truckingExpense || 0) 
    + parseFloat(formData.value.nightBoardWages || 0) 
    + parseFloat(formData.value.noonBoardWages || 0) 
    + parseFloat(formData.value.processCost || 0)
    + parseFloat(formData.value.quarterage || 0) 
    + parseFloat(formData.value.quarterageSubsidy || 0)
    + parseFloat(formData.value.otherExpenses || 0)
}

// 附件上传
const uploadFile = (data) => {
  const res = JSON.parse(data)
  if (res.length) {
    formData.value.fileName = res[0].name
    formData.value.filePath = res[0].url
  } else {
    formData.value.fileName = null
    formData.value.filePath = null
  }
}

// 查看附件
const openFile = (path: string) => {
  window.open(path)
}

defineExpose({ formData })

watch(
  () => props.detailData,
  () => {
    formData.value = props.detailData
    if (!props.detailData.childList.length) {
      // 没有售后人员时新增空值
      formData.value.childList = [{
        arriveSceneTime: undefined, //到达时间
        leaveSceneTime: undefined,  //离开时间
        workDayTotal: undefined,  //工作日总数
        staffName: undefined, //服务人员
        jobNumber: undefined, //工号
        serviceWorkTime: undefined, //服务工时
        customerMobile: undefined //联系电话
      }]
    } else {
      // 服务人员下拉选项
      serviceList.value = props.detailData.childList.map((item: ServiceType) => {
        return {
          staffName: item.staffName,
          jobNumber: item.jobNumber
        }
      })
    }
    // 没有故障
    if (!props.detailData.dutys.length) {
      formData.value.dutys = [{
        failureDescription: undefined,  //售后故障描述
        failureHandling: undefined, //故障处理情况
        failureCause: undefined,  //故障原因分析
      }]
    }
    // 没有责任判定
    if (!props.detailData.faults.length) {
      formData.value.faults = [
        {
          dictDuty: undefined,  //责任
          dutyProportion: undefined,  //占比
        }
      ]
    }
    if (props.detailData.filePath) {
      formData.value.fileList = [{
        name: props.detailData.fileName,
        url: props.detailData.filePath
      }]
    } else {
      formData.value.fileList = []
    }
  }
)
</script>
<style lang="scss" scoped>
.title {
  font-size: 34px;
  font-weight: bold;
  width: 200px;
  text-align: center;
  margin: 10px auto 0;
}

.logo {
  width: 200px;
  height: 50px;
  float: left;
}

.d-flex {
  display: flex;
}

.align-center {
  align-items: center;
}

.flex-wrap {
  flex-wrap: wrap;
}

.bg-dark {
  background-color: rgb(179 255 255 / 100%);
}

.bg-light {
  background-color: #e9fbfb;
}

.border-top {
  border-top: 1px solid #000;
}

.border-bottom {
  border-bottom: 1px solid #000;
}

.border-left {
  border-left: 1px solid #000;
}

.border-right {
  border-right: 1px solid #000;
}

.add-btn {
  padding: 10px 0;
}

.word-center {
  text-align: center;
}

.tab {
  width: 100%;
  border: 1px solid #000;
  text-align: center;

  .item-title {
    width: 10%;
    box-sizing: border-box;
  }

  .width-23 {
    width: 23.3%;
  }
  
  .width-10 {
    width: 10%;
  }

  .width-20 {
    width: 20%;
  }

  .width-30 {
    width: 30%;
  }

  .width-33 {
    width: 33.3%;
  }

  .width-40 {
    width: 40%;
  }
  
  .width-60 {
    width: 60%;
  }

  .width-90 {
    width: 90%;
  }

  .width-100 {
    width: 100%;
  }

  .height-32 {
    height: 32px;
    line-height: 32px;
  }

  .height-64 {
    height: 64px;
    line-height: 64px;
  }

  .height-66 {
    height: 66px;
    line-height:66px;
  }

  .service  {
    border-bottom: 1px solid #000;
  }

  .service-wrap:last-child .service:last-child  {
    border-bottom: none;
  }

  :deep(.el-textarea) {
    width: 90%;
    border-left: 1px solid #000;
  }

  :deep(.el-input__wrapper, .el-textarea__inner) {
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  }

  :deep(.el-textarea__inner) {
    box-shadow: 0 0 0 0 var(--el-input-border-color, var(--el-border-color)) inset;
  }

  :deep(.justify-center) {
    justify-content: center;
  }

  .faults-wrap {
    width: 90%;

    .faults {
      background-color: #fff;
      width: 100%;

      .faults-item {
        width: 50%;
      }
    }
  }
}

</style>
